<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movie Recommendations</title>
    <style>
        /* 自定义样式 */
        .movie-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .movie-item {
            width: 300px;
            margin-bottom: 30px;
            text-align: center;
        }

        .movie-poster {
            width: 250px;
            height: 350px;
            object-fit: contain;
            margin-bottom: 10px;
        }

        .movie-title {
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 5px;
        }

        .movie-link {
            color: blue;
            text-decoration: underline;
            cursor: pointer;
        }

        .movie-overview {
            font-size: 14px;
            line-height: 1.5em;
            max-height: 4.5em;
            overflow: hidden;
        }
    </style>
</head>
<body>
<h1>Movie Recommendations</h1>

<div class="movie-container"></div>

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    const API_KEY = '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'
    const BASE_URL = 'https://api.themoviedb.org/3/movie'

    // 按照要求获取电影列表的 URL
    const MOVIE_LIST_URL = `${BASE_URL}/popular?api_key=${API_KEY}&language=en-US&page=1`

    const movieContainer = document.querySelector('.movie-container')

    // 初始化页面时调用
    async function init() {
        // 获取电影列表数据
        const movieListData = await fetchMovieList()

        // 渲染电影列表到页面上
        renderMovieList(movieListData.results)
    }

    // 获取电影列表数据
    async function fetchMovieList() {
        const response = await axios.get(MOVIE_LIST_URL)
        return response.data
    }

    // 渲染电影列表到页面上
    function renderMovieList(movieList) {
        movieContainer.innerHTML = ''

        movieList.slice(0, 5).forEach(movie => {
            const { id, title, poster_path, overview } = movie

            const movieItem = document.createElement('div')
            movieItem.className = 'movie-item'

            const moviePosterLink = document.createElement('a')
            moviePosterLink.href = `https://www.themoviedb.org/movie/${id}`

            const moviePoster = document.createElement('img')
            moviePoster.src = `https://image.tmdb.org/t/p/w500/${poster_path}`
            moviePoster.alt = title
            moviePoster.className = 'movie-poster'

            const movieTitle = document.createElement('h2')
            movieTitle.innerText = title
            movieTitle.className = 'movie-title'

            const movieOverview = document.createElement('p')
            movieOverview.innerText = overview
            movieOverview.className = 'movie-overview'

            const movieLink = document.createElement('a')
            movieLink.innerText = 'Watch Now'
            movieLink.className = 'movie-link'
            movieLink.href = `https://www.youtube.com/watch?v=${id}`

            moviePosterLink.appendChild(moviePoster)

            movieItem.appendChild(moviePosterLink)
            movieItem.appendChild(movieTitle)
            movieItem.appendChild(movieOverview)
            movieItem.appendChild(movieLink)

            movieContainer.appendChild(movieItem)
        })
    }
    // 在页面加载完毕后调用 init 函数
    window.addEventListener('load', init)
</script>
</body>
</html>